<!-- Created by jack on 2022/3/17 - 16:37 -->
<style  lang="less">
body{

}
#wallpaper{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: background ease-in-out 1s;
}
</style>

<template>
  <div class="wallpaper" id="wallpaper">
    <ContentMenu id="wallpaper" :fn-list="fnList"></ContentMenu>
  </div>
</template>

<script lang="ts" setup>
import ContentMenu from "@/components/contentMenu";
import {nextTick, onMounted, ref, watch} from "vue";
import NotePad from "@/application/notePad";
let wallpaper = ref('https://s6.bihukankan.com/img/16475065972.jpg')
onMounted( () => {
  changeBackgroundImage(wallpaper.value)
})
/** 壁纸改变 */
watch(wallpaper,(value) => {
  changeBackgroundImage(value)
})


/** 根据url转dataUrl 替换body图片 */
const changeBackgroundImage = (url:string):any => {
    fetch(url)
        .then(res => res.blob())
        .then(blob => {
          let reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onloadend = function(){
            const dom = document.getElementById('wallpaper')
            dom.style.background = `url('${reader.result}')`
          };
        })
        .catch( error => console.log(error));
}


const fnList = [
  {name:'新建文件夹',cb: () =>{console.log(1)}},
  {name:'切换壁纸',cb: () =>{wallpaper.value = 'https://s6.bihukankan.com/img/1647507837wallpaper.jpg'}},
  {name:'打开记事本',cb: () => { NotePad.run() }}
]

</script>
